﻿@model WeddingEventManagementApp.Models.Client_VM

@{
    ViewBag.Title = Model.FirstName + " " + Model.LastName;
}

<div id="client-details" class="twelve columns">
    
    <div class="row">
        <div class="two columns mobile-four text-center">
            <img class="profile-image" src="@string.Format(@"https://www.gravatar.com/avatar/{0}?s={1}&d=identicon", ViewBag.Gravatar, 125)">
        </div>
        <div class="seven columns">
            <h2>@Model.FirstName @Model.LastName</h2>

            @if (String.IsNullOrEmpty(Model.City))
            {
                if (string.IsNullOrEmpty(Model.Province.ToString()))
                {
                    <h4>Location Unknown</h4>
                }
                else
                {
                    <h4>@Model.Province.ToString()</h4>
                }
            }
            else
            {
                if (string.IsNullOrEmpty(Model.Province.ToString()))
                {
                    <h4>@Model.City</h4>
                }
                else
                {
                    <h4>@Model.City, @Model.Province.ToString()</h4>
                }
            }
        </div>
        <div class="three column mobile-four text-right">
            @Html.ActionLink("Back", "Details", new { id = Model.ClientID }, new { @class = "button secondary radius" } )
        </div>
    </div>

    <br />
    <br />
    <div class="row">

        <div class="twelve columns">

            <dl class="tabs">
                <dd class="active"><a  href="#tab1">Edit Client Details</a></dd>
            </dl>

            <ul class="tabs-content">
                <li id="tab1Tab" class="twelve columns active">
                    <div class="row">
                    @using (Html.BeginForm()) {
                        
                        @Html.ValidationSummary(true)

                        <div class="twelve columns">
                            <div class="row">

                                <div class="two columns">
                                    <label class="right inline">Name:</label>
                                </div>

                                <div class="six columns">

                                    <div class="row">
                                        <div class="six columns">
                                            @Html.EditorFor(model => model.FirstName)
                                        </div>
                                        <div class="six columns">
                                            @Html.EditorFor(model => model.LastName)
                                        </div>
                                    </div>
                                </div>

                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.FirstName)
                                    @Html.ValidationMessageFor(model => model.LastName)
                                </div>

                            </div>

                            <div class="row">

                                <div class="two columns">
                                    <label class="right inline">Email:</label>
                                </div>

                                <div class="six columns">
                                    @Html.EditorFor(model => model.Email)
                                </div>

                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.Email)
                                </div>

                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label class="right inline">Phone:</label>
                                </div>

                                <div class="ten columns">
                                    @Html.Hidden("phonecount", Model != null ? Model.Phones.Count -1 : 0)

                                    <div id="phones">
                                        @for (int i = 0; i < Model.Phones.Count(); i++)
                                        {
                                            @Html.EditorFor(model => model.Phones[i]);
                                        }
                                    </div>
                                    <h4><a id="addPhone" class="button success small">Add Another Phone</a></h4>
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label class="right inline">Location:</label>
                                </div>

                                <div class="six columns">
                                    <div class="row">
                                        <div class="twelve columns">
                                            @Html.TextBoxFor(model => model.Address, new { placeholder = "Address" })
                                        </div>
                                        <div class="six columns">
                                            @Html.TextBoxFor(model => model.City, new { @class = "cmbx" })
                                        </div>
                                        <div class="three columns">
                                            @Html.DropDownListFor(model => model.Province,
                                                from Province type in Enum.GetValues(typeof(Province))
                                                select new SelectListItem() { Text = type.ToString(), Value = ((int)type).ToString(), Selected = false }, new { @class = "ddl" })
                                        </div>
                                        <div class="three columns">
                                            @Html.TextBoxFor(model => model.PostalCode, new { placeholder = "Postal Code" })
                                        </div>
                                    </div>
                                </div>

                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.Address)
                                    @Html.ValidationMessageFor(model => model.City)
                                    @Html.ValidationMessageFor(model => model.Province)
                                    @Html.ValidationMessageFor(model => model.PostalCode)
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label class="right inline">Notes:</label>
                                </div>

                                <div class="six columns">
                                    @Html.TextAreaFor(model => model.Notes, new { @rows = "10" })
                                </div>
                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.Notes)
                                </div>
                            </div>

                            <div class="row">
                                <div class="ten columns offset-by-four">
                                    <input type="submit" value="Save Client" class="button text-center" />
                                </div>
                            </div>

                            @Html.HiddenFor(model => model.ClientID)

                        </div>
                    }
                    </div>
                </li>
            </ul>

        </div>
    
    </div>

</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(".cmbx").kendoComboBox({
            dataSource: {
                type: "json",
                transport: {
                    read: "/Client/Cities"
                }
            }
        });

        var phoneDiv = $('#phones');
        $('#addPhone').click(function () {
            var currentPhoneCount = $('#phonecount').val();

            var html = '<div class="row phone-row"><div class="seven column"><div class="row"><div class="two column mobile-one">'
                + '(<input data-val="true" placeholder="###" data-val-number="The field AreaCode must be a number." data-val-required="The AreaCode field is required." id="Phones_$__AreaCode" name="Phones[$].AreaCode" type="text" value="" maxlength="3" class="three-digits">)'
                + '</div><div class="four column mobile-two">'
                + '<input data-val="true" placeholder="###" data-val-number="The field Exchange must be a number." data-val-required="The Exchange field is required." id="Phones_$__Exchange" name="Phones[$].Exchange" type="text" value="" maxlength="3" class="three-digits">'
                + ' — <input data-val="true" placeholder="####" data-val-number="The field LineNumber must be a number." data-val-required="The LineNumber field is required." id="Phones_$__LineNumber" name="Phones[$].LineNumber" type="text" maxlength="4" value="" class="four-digits">'
                + '</div><div class="two column mobile-one">'
                + 'x <input data-val="true" placeholder="Ext" data-val-number="The field Extension must be a number." id="Phones_$__Extension" name="Phones[$].Extension" placeholder="Ext" type="text" value="" class="extension">'
                + '</div><div class="four column mobile-four">'
                + '<select data-val="true" data-val-required="The PhoneNumberType field is required." id="Phones_$__PhoneNumberType" name="Phones[$].PhoneNumberType" class="ddl"><option value="Business">Business</option>'
                + '<option value="Home">Home</option>'
                + '<option value="Mobile">Mobile</option>'
                + '</select><a href="javascript:void(0)" data-id="$" class="delete-phone icomoon">&#xe060;</a></div></div></div><div class="five column">'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].AreaCode" data-valmsg-replace="true"></span>'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].Exchange" data-valmsg-replace="true"></span>'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].LineNumber" data-valmsg-replace="true"></span>'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].Extension" data-valmsg-replace="true"></span>'
                + '</div></div>';

            phoneDiv.append(html.replace(new RegExp("\\$", "g"), ++currentPhoneCount));
            $('#phonecount').val(currentPhoneCount);
        });

        $('.delete-phone').click(function(e){
            var row = $(this).parentsUntil(".phone-row").parent();
            var r = confirm("Are you sure you want to delete this Phone Number?");

            if (r === true) {
                $.ajax({
                    type: "POST",
                    url: "/Client/DeletePhone",
                    data: { id: $(this).data('id') },
                    success: function (x, y, z) {
                        if (x) {
                            row.remove();
                        }
                    }
                });
            }
            else
            {
                e.preventDefault();
            }
            
        });

    </script>
}
